<!-- eslint-disable vue/prop-name-casing -->
<script>
import manualSelect from './manualSelect.vue'
export default {
  components: { manualSelect },
  model: {
    prop: 'task_name',
    event: 'updateSubTask'
  },
  props: {
    task_id: {
      type: Number,
      required: true,
      default: null
    },
    task_name: {
      type: String,
      required: true,
      default: null
    },
    array_key: {
      type: Number,
      required: true,
      default: null
    }
  },
  data() {
    return {
      // 双向绑定的task_name
      task_content: this.task_name,
      // 标记是否进行任务的编辑
      editingTask: false,
      showManual: false,
      showEdit: false,
      showLoading: false,
      // 获取新增子任务内容的弹窗
      showInsertContent: false,
      getContent: '',
      // 保存插入前置子任务还是后置子任务
      isInsertPre: false
    }
  },
  computed: {
    downOrUp() {
      return (this.showEdit ? 'el-icon-arrow-up' : 'el-icon-arrow-down')
    }
  },
  watch: {
    // 父组件发送过来的内容进行更新
    task_name(newVal) {
      this.task_content = newVal
    },
    // 向父组件发送更新内容
    task_content(newVal) {
      this.$emit('updateSubTask', newVal)
    }
  },
  methods: {
    // 切换编辑展示状态
    changeShowEdit() {
      this.$emit('change_show_edit', this.array_key)
      this.showEdit = !this.showEdit
    },
    // 完成工具选择
    loadComplete() {
      this.showLoading = false
      if (!this.showEdit) {
        this.changeShowEdit()
      }
    },
    // 处理编辑人物下拉选单的点击事件
    taskEdit(command) {
      if (command === 'edit') {
        // 调用编辑函数
        this.editTask()
      }
      if (command === 'delete') {
        // 调用删除函数
        this.deleteTask()
      }
      if (command === 'insertPre') {
        this.isInsertPre = true
        // 调用插入函数
        this.insertTask()
      }
      if (command === 'insertPost') {
        this.isInsertPre = false
        // 调用插入函数
        this.insertTask()
      }
    },
    // 处理选择工具下拉选单的点击事件
    chooseTool(command) {
      if (command === 'manual') {
        // 调用手动选择
        this.manualChoose()
      }
      if (command === 'auto') {
        // 调用自动选择
        this.autoChoose()
      }
    },
    // 处理手动选择的点击事件
    manualChoose() {
      // 展示加载条
      this.showLoading = true
      // 隐藏工具编辑
      if (this.showEdit) {
        this.changeShowEdit()
      }
      // 展示手动选框
      this.showManual = true
    },
    // 处理自动选择的点击事件
    autoChoose() {
      // alert('功能开发中')
      // 展示加载条
      this.showLoading = true
      // 隐藏工具编辑
      if (this.showEdit) {
        this.changeShowEdit()
      }
      // 让父组件调用retrieve函数自动匹配
      this.$emit('auto_choose', this.array_key)
    },
    // 手动选择
    choseTools(row) {
      this.$emit('manual_choose', row, this.array_key)
    },
    // 在本组件中编辑子任务
    editTask() {
      this.editingTask = true
    },
    // 向父组件发送插入子任务的信息
    insertTask() {
      this.showInsertContent = true
    },
    // 向父组件发送删除子任务的信息
    deleteTask() {
      this.$emit('delete_sub_task', this.array_key)
    },
    confirmInsert() {
      // console.log('确认新增' + this.getContent)
      if (this.getContent !== '') {
        if (this.isInsertPre) {
          this.$emit('insert_sub_task', this.array_key, this.getContent)
        } else {
          this.$emit('insert_sub_task', this.array_key + 1, this.getContent)
        }
        this.getContent = ''
      }
      this.showInsertContent = false
    }
  }
}
</script>

<template>
  <!-- 背景上色部分 -->
  <div>
    <div class="app-container create-coloring">
      <el-row class="task-head" type="flex" align="middle" :gutter="6">
        <!-- 任务基本信息部分 -->
        <el-col>
          <p style="display: flex;align-items: center;">
            <!--span style="font-weight: bold">{{ $t('subTask') }}{{ task_id }}：</span-->
            <span style="font-weight: bold">{{ task_id }}</span>
            <el-input v-if="editingTask" v-model="task_content" style="margin-left: 10px; width: 90%" @keyup.enter.native="editingTask = false">
              <el-button slot="append" @click="editingTask = false"><i class="el-icon-edit-outline" /></el-button>
            </el-input>
            <span v-else style="margin-left: 10px;width: 90%">{{ task_content }}</span>
          </p>
        </el-col>
        <el-col :span="4">
          <el-dropdown trigger="click" @command="taskEdit">
            <el-button type="primary"><i class="el-icon-edit el-icon--left" />{{ $t('editTask') }}<i class="el-icon-arrow-down el-icon--right" /></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="edit">{{ $t('editSubTask') }}</el-dropdown-item>
              <el-dropdown-item command="delete">{{ $t('deleteSubTask') }}</el-dropdown-item>
              <el-dropdown-item command="insertPre">{{ $t('insertPreSubTask') }}</el-dropdown-item>
              <el-dropdown-item command="insertPost">{{ $t('insertPostSubTask') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="4">
          <el-dropdown trigger="click" @command="chooseTool">
            <el-button type="primary"><i class="el-icon-search el-icon--left" />{{ $t('selectTool') }}<i class="el-icon-arrow-down el-icon--right" /></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="manual">{{ $t('manualSelectTool') }}</el-dropdown-item>
              <el-dropdown-item command="auto">{{ $t('autoSelectTool') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="2">
          <el-button @click="changeShowEdit"><i :class="downOrUp" /></el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 等待规划进度条 -->
    <div
      v-if="showLoading"
      v-loading="showLoading"
      :element-loading-text="$t('toolSelecting')"
      element-loading-spinner="el-icon-loading"
      class="waiting-task-list"
    >
      <!--P>{{ $t('toolSelecting') }}...</P-->
      <div style="padding-top:30px; padding-bottom: 30px;" />
    </div>
    <manualSelect v-if="showManual" :show-manual-select.sync="showManual" @choosedTools="choseTools" @close_dialog="showLoading = false; showManual=false" />
    <!-- 新增子任务的弹窗 -->
    <el-dialog :visible.sync="showInsertContent" title="请输入新的子任务内容">
      <el-input v-model="getContent" placeholder="请输入新的子任务内容" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="showInsertContent = false; getContent = ''">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="confirmInsert">{{ $t('confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style scoped>
.waiting-task-list{
  padding-top: 1px;
  padding-bottom: 15px;
  padding-left: 10px;
  background-color: white;
}
.create-coloring{
  background-color: white;
}
.app-container{
  left: 0;
  width: 100%;
  margin-top: 10px;
}
</style>
